<template>
  <div class="home">
    <div class="top">
      <p>移交记录</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>资产管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备移交</el-breadcrumb-item>
        <el-breadcrumb-item>移交记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <!-- 搜索 -->
      <el-input
      clearable
        style="width: 150px"
        v-model="connectApplyNum"
        placeholder="申请单号"
      ></el-input>
      <el-input
      clearable
        style="width: 150px"
        v-model="applyPerson"
        placeholder="申请人员"
      ></el-input>
      <el-select
      clearable
        style="width: 150px"
        v-model="connectApplyDep"
        placeholder="申请部门"
      >
        <el-option
          v-for="item in connectApplyDepOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        clearable
        v-model="startTime"
        align="right"
        type="date"
        placeholder="开始日期"
      >
      </el-date-picker>
      <el-date-picker
        clearable
        v-model="endTime"
        align="right"
        type="date"
        placeholder="结束日期"
      >
      </el-date-picker>
      <el-button
        @click="onSearch"
        style="background-color: #0bb197"
        type="success"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button class="reset" @click="onReset" icon="el-icon-refresh"
        >重置</el-button
      >
    </div>
    <!-- 数据 -->
    <div class="body">
      <div class="div">
        <h4>查询结果列表</h4>
        <el-button
          style="background-color: #0bb197; border: 1px solid #0bb197"
          type="primary"
          @click="addDialog = true"
          >新增</el-button
        >
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="序号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyNum"
          label="申请单号"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyDep"
          label="申请部门"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="applyPerson"
          label="申请人员"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="applicationTime"
          label="申请时间"
          width="200"
        >
          <template slot-scope="scope"
            ><span>{{ timeTrans(scope.row.applicationTime) }}</span></template
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="connectMsg"
          label="移交事由"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyDep"
          label="移交部门"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="applicationTime"
          label="移交日期"
          width="150"
        >
          <template slot-scope="scope"
            ><span>{{
              timeTrans(scope.row.applicationTime, 1)
            }}</span></template
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="connectEquipmentNum"
          label="移交设备数量"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyState"
          label="状态"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.connectApplyState == 0 ? "审批通过" : "审批不通过"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="operation"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              @click="openEdit(scope.row)"
              style="color: #0bb197"
              type="text"
              size="small"
              >编辑</el-button
            >
            <!-- <el-button style="color:#0bb197" type="text" @click.native.prevent="del(scope.$index)"  size="small">删除</el-button> -->
            <el-button
              style="color: #0bb197"
              type="text"
              size="small"
              @click="query(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        class="msg-pagination-container"
      >
      </el-pagination>
      <!-- 新增 -->
      <el-dialog title="移交记录" :visible.sync="addDialog">
        <el-form :model="addData">
          <div class="addB">
            <el-form-item label="申请单号">
              <el-input
                v-model="addData.connectApplyNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
              <el-form-item label="申请部门">
              <el-input
                v-model="addData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="申请人员">
              <el-input
                v-model="addData.applyPerson"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-date-picker
                style="width: 350px"
                v-model="editData.applicationTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="移交事由">
              <el-input
                v-model="addData.connectMsg"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交部门">
              <el-input
                v-model="addData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="移交日期">
              <el-date-picker
                style="width: 350px"
                v-model="addData.applicationTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="移交设备数量">
              <el-input
                v-model="addData.connectEquipmentNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <!-- <div class="addB">
            <el-form-item label="状态">
              <el-input
                v-model="addData.connectApplyState"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div> -->
          <div class="addB">
            <el-form-item label="接收日期">
              <el-date-picker
                style="width: 350px"
                v-model="editData.connectDate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="接收部门">
              <el-input
                v-model="addData.receiverDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收负责人">
              <el-input
                v-model="addData.receiverLeader"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收经手人">
              <el-input
                v-model="addData.receiver"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="button" @click="addDialog = false">取 消</el-button>
          <el-button
            type="primary"
            @click="add"
            style="background-color: #0bb197; border: 1px solid #0bb197"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 详情信息 -->
      <el-dialog
        title="详情信息"
        :visible.sync="queryDialog"
        style="color: 0bb197"
      >
        <div class="queryDetails">
          <p>申请单号：{{ row.connectApplyNum }}</p>
          <p>移交日期：{{ row.applicationTime }}</p>
        </div>
        <div class="queryDetails">
          <p>接收日期：{{ row.connectDate }}</p>
          <p>移交部门：{{ row.connectApplyDep }}</p>
        </div>
        <div class="queryDetails">
          <p>移交负责人：{{ row.handsOverLeader }}</p>
          <p>移交经手人：{{ row.handsOverPerson }}</p>
        </div>
        <div class="queryDetails">
          <p>接收部门：{{ row.receiverDep }}</p>
          <p>接收负责人：{{ row.receiverLeader }}</p>
        </div>
        <div class="queryDetails">
          <p>接收经手人：{{ row.receiver }}</p>
          <p>移交事由：{{ row.connectMsg }}</p>
        </div>
        <div style="margin-left: 15px">
          <p class="startDate" style="margin: 15px 0">设备列表:</p>
          <el-table :data="deviceName" stripe style="width: 100%">
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column
              prop="equipmentCoding"
              label="设备编码"
            ></el-table-column>
            <el-table-column
              prop="deviceName"
              label="设备名称"
            ></el-table-column>
            <el-table-column
              prop="equipmentModel"
              label="设备型号"
            ></el-table-column>
            <el-table-column
              prop="manufacturers"
              label="厂家名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="purchaseDate"
              label="购入时间"
              width="150"
            >
              <template slot-scope="scope"
                ><span>{{
                  timeTrans(scope.row.purchaseDate, 1)
                }}</span></template
              >
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <!-- 修改数据 -->
      <el-dialog title="编辑详情" :visible.sync="editDialog">
        <el-form :model="editData">
          <div class="addB">
            <el-form-item label="申请单号">
              <el-input
                v-model="editData.connectApplyNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请部门">
              <el-input
                v-model="editData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="申请人员">
              <el-input
                v-model="editData.applyPerson"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交日期">
              <el-date-picker
                style="width: 350px"
                v-model="editData.applicationTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收日期">
              <el-date-picker
                style="width: 350px"
                v-model="editData.connectDate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="移交部门">
              <el-input
                v-model="editData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="移交负责人">
              <el-input
                v-model="editData.handsOverLeader"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交经手人">
              <el-input
                v-model="editData.handsOverPerson"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收部门">
              <el-input
                v-model="editData.receiverDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收负责人">
              <el-input
                v-model="editData.receiverLeader"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收经手人">
              <el-input
                v-model="editData.receiver"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交事由">
              <el-input
                v-model="editData.connectMsg"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="移交设备数量">
              <el-input
                v-model="editData.connectEquipmentNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="button" @click="editDialog = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="edit"
            style="background-color: #0bb197; border: 1px solid #0bb197"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import time from "../utils/time";
export default {
  mixins: [time],
  data: function () {
    return {
      connectApplyNum: "",
      applyPerson: "",
      connectApplyDep: "",
      startTime: "",
      endTime: "",
      tableData: [],
      total: 1,
      count: 5,
      page: 1,
      addDialog: false,
      addData: {
        connectApplyNum: "",
        connectApplyDep: "",
        applicationTime: "",
        connectMsg: "",
        connectDep: "",
        connectDate: "",
        connectEquipmentNum: "",
        connectApplyState: 0,
        receiverLeader: "",
        receiverDep: "",
        receiver: "",
        connectApplyDep: "",
        handsOverLeader: "",
        handsOverPerson: "",
      },
      row: "",
      queryDialog: false,
      deviceName: [],
      editDialog: false,
      editData: {},
      //申请部门
      connectApplyDepOptions: [],
      connectApplyDepValue: "",
      twoOptions: [],
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    //数据渲染
    getData: function () {
      this.$axios({
        url: "/smart/connect-record/list",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
          applyId: this.connectApplyNum,
          applyPerson: this.applyPerson,
          dept: this.connectApplyDep,
          startTime: this.startTime,
          endTime: this.endTime,
        },
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    find: function (a, b) {
      for (var i = 0; i < b.length; i++) {
        if (b[i] == a) {
          return 1;
        }
      }
      return 0;
    },
    //封装申请部门
    getconnectApplyDep: function () {
      this.$axios({
        url: "/smart/connect-record/list",
        method: "get",
        params: {
          pageNum: 1,
          pageSize: 100000,
        },
      }).then(({ data }) => {
        if (data.code == 2000) {
          console.log(data.department)
          data.department.forEach((v) => {
            let item = {
              value: v,
              label: v,
            };
            this.connectApplyDepOptions.push(item);
                    
          });          
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    //查询
    onSearch: function () {
      console.log(111);
      this.getData();
    },
    //重置
    onReset: function () {
      (this.connectApplyNum = ""),
        (this.applyPerson = ""),
        (this.connectApplyDep = ""),
        (this.startTime = ""),
        (this.endTime = "");
      this.getData();
    },
    //新增
    add: function () {
      this.$axios({
        url: "/smart/connect-record/add",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        if ((data.code = 2000)) {
          console.log(data);
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
        } else {
          console.log(data);
          this.$message.error("添加失败");
        }
      });
    },
    //详情
    query: function (row) {
      this.row = row;
      console.log(this.row);
      this.queryDialog = true;
      this.$axios({
        url: "/smart/equipment/queryById/" + row.id,
      }).then(({ data }) => {
        console.log("222", data);
        if (data.code == 2000) {
          this.deviceName = [data.data];
          this.row.connectDate = this.timeTrans(this.row.connectDate, 1);
          this.row.applicationTime = this.timeTrans(
            this.row.applicationTime,
            1
          );
          // console.log(typeof this.detailsData.purchaseDate);
          this.getData();
        }
      });
    },
    //编辑
    openEdit: function (row) {
      //编辑框显示出来
      this.editDialog = true;
      //赋值
      let editData = { ...row };
      this.editData = editData;
      console.log(this.editData);
    },
    edit: function () {
      this.$axios({
        url: "/smart/connect-record/edit",
        method: "PUT",
        data: this.editData,
      }).then(({ data }) => {
        if (data.code == 2000) {
          console.log(data);
          this.$message.success("修改成功");
          this.editDialog = false;
          this.getData();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
    this.getconnectApplyDep();
  },
};
</script>

<style scoped>
.home {
  height: 95%;
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 20px 20px 10px 25px;
}
.header {
  height: 60px;
  background: white;
  margin: 10px 20px 20px;
  padding-top: 18px;
  padding-left: 15px;
  border-radius: 8px;
}
.reset {
  color: rgb(197, 196, 196);
}
.reset:hover {
  color: #0bb197;
}

.el-select {
  width: 180px;
  margin-right: 10px;
}
.el-button {
  margin-left: 10px;
}
.body {
  background: white;
  margin: 10px 20px;
  height: 84%;
  border-radius: 8px;
}
.el-pagination {
  margin: 25px 10px 0 0;
  display: flex;
  justify-content: right;
}
.div {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.el-input {
  width: 350px;
  margin-right: 10px;
}
.addB {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.button:hover {
  color: #0bb197;
  border: 1px solid #0bb197;
}
</style>
<style>
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
.queryDetails {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 15px;
}
.queryDetails p {
  width: 50%;
}
/* .el-input--prefix .el-input__inner{
  width: 250px;
} */
</style>
